<template>
  <div class="contents">
    <PanelTitle title="地块上云" />
    <div class="mt">
      <div class="infoPanel">
        <div>
          <div class="infoTitle">上云地块规模</div>
          <div class="infoNums">
            <span class="infoNum">{{ statistData.acreage }}</span>
            <span class="infoUnit">亩</span>
          </div>
          <!-- <div class="infoSub">占比 {{ statistData.acreageRatio }}%</div> -->
        </div>
        <div>
          <div class="infoTitle">上云地块规模变化</div>
          <div class="infoNums">
            <span class="infoNum">+{{ statistData.currMonthAcreage }}</span>
            <span class="infoUnit">亩</span>
          </div>
          <!-- <div class="infoSub">
            环比 {{ statistData.currMonthAcreageRatio }}%
          </div> -->
        </div>
      </div>
      <div ref="maps" class="maps"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

let statistData = ref({});

const maps = ref(null);
onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/digitalize/land/cloud/statist",
    method: "get",
  });

  statistData.value = res.data;

  let xData = res.data.landInfoYearMonthStatistList.map((item) => {
    return item.cloudYearMonth;
  });

  let seriesData = res.data.landInfoYearMonthStatistList.map((item) => {
    return item.acreage;
  });

  var myChart = echarts.init(maps.value);
  myChart.setOption({
    tooltip: {
      show: true,
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "8%",
      top: "18%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xData,
        axisLabel: {
          textStyle: {
            color: "#7AFFFD",
            fontSize: 10,
          },
        },
        axisPointer: {
          type: "shadow",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.09)", //线条颜色
            type: "dashed", //线条样式，默认是实现，dashed是虚线
          },
        },
        // nameTextStyle: {
        //   color: "#fff",
        //   fontSize: 10,
        //   padding: [0, -620, 0, 0],
        // },
        // name: "单位：块",
        min: 0,
        axisLabel: {
          textStyle: {
            color: "#7AFFFD",
            fontSize: 10,
          },
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.09)", //线条颜色
            type: "dashed", //线条样式，默认是实现，dashed是虚线
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.09)", //线条颜色
            type: "dashed", //线条样式，默认是实现，dashed是虚线
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: 18,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 239, 60, 1)",
              },
              {
                offset: 1,
                color: "rgba(19, 37, 67, 0.08)",
              },
            ]),
          },
        },
        data: seriesData,
        // showBackground: true,
        // backgroundStyle: {
        //   color: "rgba(255, 255, 255, .2)",
        // },
      },
    ],
  });
});
</script>


<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}

.maps {
  height: vh(100);
  width: 100%;
}

.infoPanel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 vw(15) 0;

  > div {
    // border-radius: 10px;
    box-sizing: border-box;
    width: vw(160);
    height: vh(80);
    background: rgba(9, 36, 44, 0.4);
    border: vh(1) solid #43e7ff;
    padding: 0 vw(20) 0px;
    margin: vh(6) 0;
  }
  .infoTitle {
    color: #fff;
    font-size: vh(10);
    line-height: vh(30);
  }
  .infoNums {
    line-height: vh(20);
  }
  .infoNumss {
    line-height: vh(36);
  }
  .infoNum {
    color: #adffd7;
    font-size: vh(26);
    font: SourceHanSansCN-Bold;
  }
  .infoUnit {
    color: #adffd7;
    font-size: vh(16);
    font: SourceHanSansCN-Bold;
    margin-left: vw(4);
  }
  .infoSub {
    font-weight: 400;
    font-size: vh(10);
    color: #adffd7;
    line-height: vh(20);
  }
}
</style>